<!-- src/views/recruitment/PendingList.vue -->
<template>
  <div class="recruitment-container">
    <el-card>
      <div class="filter-header">
        <h2>待面试人员管理</h2>
        <div class="filter-actions">
          <el-button type="primary" icon="el-icon-refresh" @click="refreshList">刷新</el-button>
          <el-button icon="el-icon-download" @click="exportData">导出数据</el-button>
        </div>
      </div>

      <div class="filter-controls">
        <el-input
            v-model="filter.keyword"
            placeholder="搜索姓名/职位"
            clearable
            style="width: 250px; margin-right: 15px;"
            @keyup.enter="search"
        />
        <el-select
            v-model="filter.position"
            placeholder="应聘职位"
            clearable
            style="width: 180px; margin-right: 15px;"
        >
          <el-option label="前端工程师" value="frontend" />
          <el-option label="后端工程师" value="backend" />
          <el-option label="UI设计师" value="ui" />
          <el-option label="产品经理" value="pm" />
        </el-select>
        <el-select
            v-model="filter.experience"
            placeholder="工作经验"
            clearable
            style="width: 180px; margin-right: 15px;"
        >
          <el-option label="无工作经验" value="0" />
          <el-option label="1年内" value="1" />
          <el-option label="1-3年" value="2" />
          <el-option label="3-5年" value="3" />
          <el-option label="5-10年" value="4" />
          <el-option label="10年以上" value="5" />
        </el-select>
        <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
      </div>
    </el-card>

    <el-card class="mt-20">
      <el-table :data="candidateList" style="width: 100%" height="600">
        <el-table-column prop="name" label="姓名" width="120" />
        <el-table-column prop="position" label="应聘职位" width="180" />
        <el-table-column prop="experience" label="工作经验" width="120">
          <template #default="scope">
            {{ formatExperience(scope.row.experience) }}
          </template>
        </el-table-column>
        <el-table-column prop="education" label="学历" width="120" />
        <el-table-column prop="applyDate" label="申请时间" width="180" />
        <el-table-column prop="source" label="来源" width="120" />
        <el-table-column label="状态" width="120">
          <template #default="scope">
            <el-tag type="warning">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220" fixed="right">
          <template #default="scope">
            <el-button size="small" type="success" @click="handleEmploy(scope.row)">录用</el-button>
            <el-button size="small" type="danger" @click="handleReject(scope.row)">淘汰</el-button>
            <el-button size="small" icon="el-icon-download" @click="downloadResume(scope.row)">简历</el-button>
            <el-button size="small" type="primary" icon="el-icon-view" @click="viewDetail(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
            v-model:current-page="currentPage"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total"
            @current-change="handlePageChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

export default {
  setup() {
    const filter = reactive({
      keyword: '',
      position: '',
      experience: ''
    })

    const candidateList = ref([
      { id: 1, name: '张三', position: '前端工程师', experience: 2, education: '本科',
        applyDate: '2023-05-10 14:30', status: '待面试', source: '小程序' },
      { id: 2, name: '李四', position: '后端工程师', experience: 4, education: '研究生',
        applyDate: '2023-05-11 10:15', status: '待面试', source: '招聘网站' },
      { id: 3, name: '王五', position: 'UI设计师', experience: 3, education: '本科',
        applyDate: '2023-05-12 09:45', status: '待面试', source: '内部推荐' }
    ])

    const currentPage = ref(1)
    const pageSize = ref(10)
    const total = ref(3)

    const formatExperience = (value) => {
      const map = {
        0: '无经验',
        1: '1年内',
        2: '1-3年',
        3: '3-5年',
        4: '5-10年',
        5: '10年以上'
      }
      return map[value] || '未知'
    }

    const search = () => {
      ElMessage.success('查询成功')
    }

    const refreshList = () => {
      ElMessage.success('数据已刷新')
    }

    const handleEmploy = (row) => {
      ElMessage.success(`已录用: ${row.name}`)
      // 实际项目中这里会调用API更新状态
    }

    const handleReject = (row) => {
      ElMessage.success(`已淘汰: ${row.name}`)
      // 实际项目中这里会调用API更新状态
    }

    const downloadResume = (row) => {
      ElMessage.success(`开始下载${row.name}的简历`)
      // 实际项目中这里会调用下载API
    }

    const viewDetail = (row) => {
      ElMessage.info(`查看${row.name}的详情`)
      // 实际项目中这里会跳转到详情页
    }

    const handlePageChange = (page) => {
      currentPage.value = page
      // 实际项目中根据页码加载数据
    }

    const exportData = () => {
      ElMessage.success('数据导出成功')
    }

    return {
      filter,
      candidateList,
      currentPage,
      pageSize,
      total,
      formatExperience,
      search,
      refreshList,
      handleEmploy,
      handleReject,
      downloadResume,
      viewDetail,
      handlePageChange,
      exportData
    }
  }
}
</script>

<style scoped>
.recruitment-container {
  padding: 20px;
}

.filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.filter-controls {
  display: flex;
  margin-bottom: 15px;
}

.mt-20 {
  margin-top: 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>